{% extends 'app01/base_backend.html' %}

{% block article %}
    {#    文章展示开始#}
    <table class="table-hover table table-striped">
        <thead class="table-striped">
        <tr>
            <th>标题</th>
            <th>评论数</th>
            <th>点赞数</th>
            <th>创建时间</th>
            <th>操作</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% if c_page != null %}
            {% for obj in c_page %}
                <tr>  <!--跳转到文章详情页中-->
                    <td><a href="/app01/site/{{ request.user.username }}/article/{{ obj.pk }}?url={{ request.get_full_path_info }}"
                           target="_blank">{{ obj.title }}</a></td>
                    <td>{{ obj.comment_num }}</td>
                    <td>{{ obj.up_num }}</td>
                    <td>{{ obj.create_time }}</td>
                    <td><a href="/app01/editor_article?article_id={{ obj.pk }}">编辑 <span
                            class="glyphicon glyphicon-erase"></span></a></td>
                    <td><a href="#" class="btn delete_article_class" article_id="{{ obj.pk }}" style="color: indianred">删除
                        <span class="glyphicon glyphicon-trash"></span></a></td>
                </tr>
                {% empty %}
                 <h3>没有发布过帖子。</h3>
            {% endfor %}

        {% endif %}

        </tbody>

    </table>
    {#    文章展示结束#}
    {#    分页开始#}
    <div class="pull-right">
        <nav aria-label="Page navigation">
            <ul class="pagination">
                {{ page_html }}
            </ul>
        </nav>
    </div>
    {#    分页结束#}
{% endblock %}

{% block suibi %}
    <div class="panel panel-default">
        <div class="panel-heading">我的帖子分类</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    {% for  category in categorys %}
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-warning">
                                <a href="/app01/site/{{ request.user.username }}/category/{{ category.id }}/"
                                   target="_blank"> {{ category.name }}</a>
                            </li>
                        </ul>
                    {% endfor %}
                    <div>
                        <p><input type="text" class="form-control" value="输入新增分类名" id="category_id"></p>
                        <p>
                            <button class="btn btn-block btn-primary" id="category_btn_id">确认新增分类</button>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>


{% endblock %}

{% block caogao %}

    <div class="panel panel-default">
        <div class="panel-heading">我的帖子标签</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-6 col-md-offset-3">
                    {% for  tag in tags %}
                        <ul class="list-group">
                            <li class="list-group-item list-group-item-success">
                                <a href="/app01/site/{{ request.user.username }}/tag/{{ tag.id }}/"
                                   target="_blank"> {{ tag.name }}</a>
                            </li>
                        </ul>
                    {% endfor %}
                    <div>
                        <p><input type="text" class="form-control" value="输入新增标签名" id="tag_id"></p>
                        <p>
                            <button class="btn btn-block btn-primary" id="tag_btn_id">确认新增标签</button>
                        </p>
                    </div>
                </div>

            </div>
        </div>
    </div>


{% endblock %}

{% block files %}
    <div class="panel panel-default">
  <div class="panel-heading">
    <table class="table">
        <tr>
            <th>文件名</th>
            <th>文件描述</th>
            <th>共享</th>
            <th>上传时间</th>
            <th>操作</th>
        </tr>

    </table>
  </div>
  <div class="panel-body" style="height:350px;width:100%;overflow:auto;">
    <table class="table-hover table table-striped" >
        <tbody>
        {% if user_file != null %}

            {% for file in user_file %}
                <tr>  <!--跳转到文件详情页中-->
                    <!--需要将文件的id传递给后端视图函数.get请求获取到-->
                    <td class="" style="color: #2557d4"><a href="/app01/preview_file?file_id={{ file.pk }}&url={{ request.get_full_path_info }}"
                                                  target="_blank">{{ file.name }}</a></td>
                    <td class="text-center" style="color: #2557d4">{{ file.desc }}</td>
                    <td class="text-right">{{ file.share }}</td>
                    <td class="text-right">&nbsp;&nbsp;&nbsp;&nbsp;{{ file.create_time }}</td>
                    <td class="text-right">
                        <a class="btn " href="/app01/download/file?name={{ file.filename }}&file_id={{ file.pk }}">
                            下载 <span class="glyphicon glyphicon-save"></span>
                        </a>
                        <a href="#" class="btn delete_file_class " style="color: indianred" file_id="{{ file.id }}">删除
                            <span class="glyphicon glyphicon-trash"></span></a>
                    </td>
                </tr>
                {% empty %}
                <h3>还没有上传过笔记。</h3>
            {% endfor %}


        {% endif %}

        </tbody>


    </table>
  </div>
</div>
    {#    文件资源展示开始#}

    {#    文件资源展示开始#}
    {#    文件分页开始#}
{#    <div class="pull-right">#}
{#        <nav aria-label="Page navigation">#}
{#            <ul class="pagination">#}
{#                {{ file_page_html }}#}
{#            </ul>#}
{#        </nav>#}
{#    </div>#}
    {#    文件分页结束#}
{% endblock %}

{% block settings %}
    <div class="panel panel-default">
        <div class="panel-heading">我的个人信息</div>
        <div class="panel-body">
            <div class="row">
                <div class="col-md-8 col-md-offset-2">
                    <div class="form-group">
                        <label for="myfile" style="margin-left: 10px" class="text-center">
                            {% load static %}
                            <img src="/media/{{ request.user.avatar }}" alt="图片加载" height="100" id="myimg">
                            {#点击图片也可以打开文件，进行上传 因为label for 的id是文件上传的#}
                            选择头像
                        </label>
                        <input type="file" id="myfile" name="avatar" style="display: none">
                        <!--display:none  隐藏掉-->
                    </div>
                    <div class="form-group" >

                        <p>phone:<input type="text" id="phone" class="form-control" value="{{ request.user.phone }}">
                        </p>
                        <p>email: <input type="text" id="email" class="form-control" value="{{ request.user.email }}"></p>
                         <p id="set_person_id"></p> <!--班级的显示地方-->
                        <p>站点签名：<input type="text" id="site" class="form-control"
                                       value="{{ request.user.blog.site_title }}"></p>


                    </div>
                    <input type="button" id="id_submit" class="btn btn-primary pull-right btn-block" value="确定修改">
                </div>
            </div>

        </div>
    </div>
<p id="test"></p>

{% endblock %}


{% block js %}

    <script>
    if('{{ request.user.username }}'.slice(0,3)==='512'){
         $('#p_for_a').html('<a href="/app01/manage_student/" class="list-group-item">学生管理</a>')
        $('#role_for').html('角色：<br><a href="#">老师</a>')
    }


    if('{{ request.user.username }}'.slice(0,3)==='312'){

        $('#set_person_id').html('<p>班级：<input type="text" id="stu_class" class="form-control" value="{{ request.user.stu_class }}"></p>')
         $('#role_for').html('角色：<br><a href="#">学生</a>')
    }
        //增加分类的输入框清空
        $('#category_id').focus(function () {
            $(this).val('')

        })
        //文章分类的增加
        $("#category_btn_id").click(function () {
            let add_category = $('#category_id').val()
            $.ajax({
                url: '',
                type: 'post',
                data: {'add_category': add_category, 'forcategory': ''},
                success: function (attr) {
                    if (attr.code === 1000) {
                        alert(attr.msg)
                        window.location.reload()

                    } else {
                        alert(attr.msg)
                    }

                }
            })

        });


    //学生才有班级
     if('{{ request.user.username }}'.slice(0,3)==='312'){
        $('#MyClass').html("<a href='/app01/myclass/'> 我的班级 </a>")
    }

        //增加的标签的输入框清空
        $('#tag_id').focus(function () {
            $(this).val('')//将输入标签的提示清空
        })
        //文章和标签的增加
        $("#tag_btn_id").click(function () {
            let add_tag = $('#tag_id').val()
            $.ajax({
                url: '',
                type: 'post',
                data: {'add_tag': add_tag, 'fortag': ''},
                success: function (attr) {
                    if (attr.code === 1000) {
                        alert(attr.msg)
                        window.location.reload()

                    } else {
                        alert(attr.msg)
                    }

                }
            })

        });


        //文本域变化事件,修改头像,可以有预览的功能
        $('#myfile').change(function () {
            //文件阅读器对象
            //1 先生成一个文件阅读器对象
            let myFileReaderObje = new FileReader();
            //2 获取用户上传的头像文件,怎么拿上传的文件，通过下面，可以$(this)
            let fileObj = $('#myfile')[0].files[0]
            //3 将文件对象交给阅读器对象读取
            myFileReaderObje.readAsDataURL(fileObj)//异步操作，不等待文件阅读完毕，文件还没有读完，就走到下一步了。
            //4 利用文件阅读器将文件展示到前端页面，修改src属性
            //等待文件阅读器加载完毕再执行，unload,再显示图片
            myFileReaderObje.onload = function () {
                $('#myimg').attr('src', myFileReaderObje.result)
            }

        })

        //提交ajax请求修改个人信息。
        $('#id_submit').on('click', function () {
            let formObj = new FormData()
            formObj.append('file', $('#myfile')[0].files[0])
            formObj.append('phone', $('#phone').val())
            formObj.append('title', $('#site').val())
             formObj.append('email', $('#email').val())
            formObj.append('stu_class',$('#stu_class').val())
            $.ajax({
                url: '{% url "app01_change_datas" %}',
                type: 'post',
                data: formObj,
                contentType: false,
                processData: false,
                success: function (array) {
                    if (array.code === 1000) {
                        alert(array.msg)
                        //修改成功后跳转会后台管理界面
                        parent.location.href = array.url
                    } else {
                        alert(array.msg)
                        //修改失败也跳转回后台管理的界面
                        parent.location.href = array.url
                    }

                }
            })

        });

        //文件上传的ajax请求
        $("#up_btn_id").click(function () {
            let formObj = new FormData()
            formObj.append('file', $('#up_file_id')[0].files[0])
            formObj.append('filename', $('#file_name_id').val())
            formObj.append('desc', $('#file_desc_id').val())
            let radio_chioce = $('input[name="share"]:checked').val();
            formObj.append('share', radio_chioce)

            $.ajax({
                url: "/app01/upload_file/",
                type: 'post',
                data: formObj,
                contentType: false,
                processData: false,
                success: function (array) {
                    if (array.code === 1000) {
                        alert(array.msg0)
                        parent.location.href = array.url
                    } else if (array.code === 2000) {
                        //用户输入不正确的提示
                        $('#p1').next().text(array.msg1)
                        $('#p2').next().text(array.msg2)
                        $('#p3').next().text(array.msg3)
                    } else {
                        alert(array.msg0)
                    }

                }
            })


        });

        //文件删除的ajax请求
        $('.delete_file_class').click(function () {
            let op = confirm('是否删除该文件')
            //将文件的id保存到删除按钮标签里面,使用自定义的属性
            //this刚好就是被点击的按钮,要拿的就是该按钮中保存的文件的id
            let file_id = $(this).attr('file_id')
            $.ajax({
                //删除还是由本url来解决吧
                url: '{% url "app01_backend" %}',
                type: 'post',
                data: {
                    'op': op,//返回值是true或false
                    'file_id': file_id,
                    'for_del_file': ''
                },
                success: function (array) {
                    if (array.code === 200) {
                        alert(array.msg)
                        //刷新当前页面
                        window.location.reload()
                    } else if (array.code === 500) {
                        alert(array.msg)
                    }
                }
            })

        });

        //删除文章的ajax请求
        $('.delete_article_class').click(function () {
            let op = confirm('确定删除该文章.')
            //attr('属性名') 是取属性值,把 要删除的文章的id取到,发起ajax请求,使用get请求来实现
            let article_id = $(this).attr('article_id')
            $.ajax({
                url: '',
                type: 'get',
                data: {
                    'op': op,
                    'article_id': article_id,
                    'for_del_article': ''
                },
                success: function (array) {
                    if (array.code === 200) {
                        alert(array.msg)
                        //刷新当前页面
                        window.location.reload()
                    } else if (array.code === 500) {
                        alert(array.msg)
                    }
                },


            })

        });

        //关注的ajax请求
 $('#id_editer').on('click', function () {
            let old_pwd = $('#id_old_pwd').val()
            let new_pwd = $('#id_new_pwd').val()
            let confirm_pwd = $('#id_confirm_pwd').val()
            $.ajax({
                url: '/app01/set_password/',
                type: 'post',
                data: {
                    'old_pwd': old_pwd,
                    'new_pwd': new_pwd,
                    'confirm_pwd': confirm_pwd,
                    //'csrfmiddlewaretoken':{{ csrf_token }}
                },
                success: function (array) {
                    if (array.code === 1000) {
                        {#parent.location.href='/app01/login/'#}
                        //刷新当前url
                        alert('修改密码成功，重新登录')
                        window.location.reload()
                    } else {
                        $('#error').text(array.msg)
                    }

                }
            })

        });

    </script>
{% endblock %}

